<template>
    <div>
        <section class="data_section">
            <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          选择：{{ "接口" + selectIndex }}
		  <i class="el-icon-caret-bottom el-icon--right"></i>
        </span>
                <el-dropdown-menu
                    slot="dropdown"
                    style="height: 400px;overflow:scroll"
                >
                    <el-dropdown-item command="1">接口1</el-dropdown-item>
                    <el-dropdown-item command="2">接口2</el-dropdown-item>
                    <el-dropdown-item command="3">接口3</el-dropdown-item>
                    <el-dropdown-item command="4">接口4</el-dropdown-item>
                    <el-dropdown-item command="5">接口5</el-dropdown-item>
                    <el-dropdown-item command="6">接口6</el-dropdown-item>
                    <el-dropdown-item command="7">接口7</el-dropdown-item>
                    <el-dropdown-item command="8">接口8</el-dropdown-item>
                    <el-dropdown-item command="9">接口9</el-dropdown-item>
                    <el-dropdown-item command="10">接口10</el-dropdown-item>
                    <el-dropdown-item command="11">接口11</el-dropdown-item>
                    <el-dropdown-item command="12">接口12</el-dropdown-item>
                    <el-dropdown-item command="13">接口13</el-dropdown-item>
                    <el-dropdown-item command="14">接口14</el-dropdown-item>
                    <el-dropdown-item command="15">接口15</el-dropdown-item>
                    <el-dropdown-item command="16">接口16</el-dropdown-item>
                    <el-dropdown-item command="17">接口17</el-dropdown-item>
                    <el-dropdown-item command="18">接口18</el-dropdown-item>
                    <el-dropdown-item command="19">接口19</el-dropdown-item>
                    <el-dropdown-item command="20">接口20</el-dropdown-item>
                    <el-dropdown-item command="21">接口21</el-dropdown-item>
                    <el-dropdown-item command="22">接口22</el-dropdown-item>
                    <el-dropdown-item command="23">接口23</el-dropdown-item>
                    <el-dropdown-item command="24">接口24</el-dropdown-item>
                    <el-dropdown-item command="25">接口25</el-dropdown-item>
                    <el-dropdown-item command="26">接口26</el-dropdown-item>
                    <el-dropdown-item command="27">接口27</el-dropdown-item>
                    <el-dropdown-item command="28">接口28</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <div class="block" style="float: right">
                <span class="demonstration">时间范围</span>
                <el-date-picker
                    v-model="timeRange"
                    type="datetimerange"
                    :picker-options="pickerOptions"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                >
                </el-date-picker>
            </div>
            <el-row style="height: 100px;margin-top: 30px">
                <el-button type="primary" plain style="float: right" @click="sendRequest">确认</el-button>
            </el-row>
            <!-- <tendency :sevenDate='sevenDate' :sevenDay='sevenDay'></tendency> -->
            <div class="line1">
                <div id="line1" class="" style="width: 90%; height: 450px"></div>
            </div>
            <el-table
                :data="errorTableData"
                max-height="600"
                highlight-current-row
                style="width: 90%"
            >
                <el-table-column property="interface" label="" width="100">
                </el-table-column>
                <el-table-column property="avgAva" label="接口平均利用率" width="140">
                </el-table-column>
                <el-table-column property="ifTotalInPkts" label="接收总包数" width="120">
                </el-table-column>
                <el-table-column property="ifTotalOutPkts" label="发送总包数" width="120">
                </el-table-column>
                <el-table-column property="changeInErrorRate" label="接收错误率增幅" width="140">
                </el-table-column>
                <el-table-column property="changeOutErrorRate" label="发送错误率增幅">
                </el-table-column>
            </el-table>
        </section>
    </div>
</template>

<script>
import echarts from "echarts/lib/echarts";
import "echarts/lib/chart/line";
import "echarts/lib/chart/bar";
import "echarts/lib/component/title";
import "echarts/lib/component/legend";
import "echarts/lib/component/markPoint";

import {get} from "../../request";

// import chart_json from "../../../json_data/chartData.json";
// import err_json from "../../../json_data/ErrPercent.json";
// import ava_json from "../../../json_data/Availability.json";

export default {
    data() {
        return {
            selectIndex: 1,
            errorTableData: [],
            chart_json: {
            },
            tableData:[],
            start:"",
            end:"",
            timeRange: [new Date(2021, 5, 19, 16, 55,0), new Date(2021, 5, 19, 16, 56,0)],
            pickerOptions: {
                shortcuts: [{
                    text: '最近十分钟',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 600 * 1000);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一小时',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一天',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },

        };
    },
    components: {},
    mounted() {
         this.initData();
    },
    computed: {},
    methods: {
        sendRequest() {
            this.timeConvert();
            get({
                url: "/getHistoricalPortData",
                params: {
                    port: this.selectIndex,
                    startTime:this.start,
                    endTime:this.end,
                }
            })
                .then((res) => {
                    // var json_data = res.data.data;
                    console.log(res.data);
                    this.chart_json = res.data.chart;
                    this.tableData=res.data.table;
                    this.initData();
                })
                .catch((res) => {
                });
        },
        handleCommand(command) {
            this.selectIndex = parseInt(command);
            this.initData();
        },
        timeConvert(){
          let date = new Date(this.timeRange[0]);
          date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
          date.toJSON().substr(0, 19).replace('T',' ');
          console.log(date)
          this.start=date;
          let date2 = new Date(this.timeRange[1]);
          date2.setMinutes(date2.getMinutes() - date2.getTimezoneOffset());
          date2.toJSON().substr(0, 19).replace('T',' ');
          this.end=date2;
        },
        initData() {
            this.errorTableData = [
                {
                    interface: this.selectIndex,
                    avgAva: this.tableData.avgAva,
                    ifTotalInPkts: this.tableData.ifTotalInPkts,
                    ifTotalOutPkts: this.tableData.ifTotalOutPkts,
                    changeInErrorRate: this.tableData.changeInErrorRate,
                    changeOutErrorRate: this.tableData.changeOutErrorRate,
                },
            ];
            this.drawChart();
        },
        drawChart() {
            this.myChart = echarts.init(document.getElementById("line1"));
            // this.initData();
            const colors = ["#5793f3", "#675bba", "#d14a61", "#e5323e"];
            const option = {
                color: colors,
                tooltip: {
                    trigger: "axis",
                },
                legend: {
                    data: [
                        "接收字节数",
                        "发送字节数",
                        "接收出错报文数",
                        "发送出错报文数",
                    ],
                },
                xAxis: {
                    type: "category",
                    name: "Time",
                    boundaryGap: false,
                    data: this.chart_json.timeAxis,
                },
                yAxis: [
                    {
                        id: 0,
                        type: "value",
                        name: "kB",
                        position: "left",
                        axisLine: {
                            lineStyle: {
                                color: "#999",
                            },
                        },
                        axisLabel: {
                            formatter: "{value}",
                        },
                        splitLine: {
                            show: false,
                        },
                    },
                    {
                        id: 1,
                        type: "value",
                        name: "Pkts",
                        position: "right",
                        axisLine: {
                            lineStyle: {
                                color: "#999",
                            },
                        },
                        axisLabel: {
                            formatter: "{value}",
                        },
                        splitLine: {
                            show: false,
                        },
                    },
                ],
                series: [
                    {
                        name: "接收字节数",
                        type: "line",
                        yAxisIndex: 0,
                        //   data: this.sevenDate[0],
                        showSymbol: false,
                        smooth: 0.7,
                        data: this.chart_json.ifInOctets,
                        animation: true,
                    },
                    {
                        name: "发送字节数",
                        type: "line",
                        yAxisIndex: 0,
                        //   data: this.sevenDate[1],
                        showSymbol: false,
                        smooth: 0.7,
                        data: this.chart_json.ifOutOctets,
                        animation: true,
                    },
                    {
                        name: "接收出错报文数",
                        type: "line",
                        yAxisIndex: 1,
                        showSymbol: false,
                        data: this.chart_json.ifInErrors,
                        animation: true,
                        //   data: this.sevenDate[2],
                    },
                    {
                        name: "发送出错报文数",
                        type: "line",
                        yAxisIndex: 1,
                        //   data: this.sevenDate[3],
                        showSymbol: false,
                        data: this.chart_json.ifOutErrors,
                        animation: true,
                    },
                ],
            };
            this.myChart.setOption(option);
        },
    },
};
</script>

<style lang="less">
@import "../style/mixin";

.data_section {
    padding: 20px;
    margin-bottom: 40px;

    .section_title {
        text-align: center;
        font-size: 30px;
        margin-bottom: 10px;
    }
}

.line1 {
    display: flex;
    justify-content: center;
}
</style>
